<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/public::common-public}">
<header th:replace="~{commons/header::common-header(activeUrl='main')}"></header>
<meta charset="UTF-8">
<title></title>
</head>
<style>
h1{
	color:#f3efef;
}
* {
	margin: 0;
    padding: 0;
}

ul, ol, li {
    list-style: none;
}
.banner {
    width: 60%;
    height: 400px;
    position: relative;
    left:25%;
    margin: 10px 0;
}
.banner > ul {
    width: 100%;
    height: 100%;

    position: relative;
}
.banner > ul > li {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    opacity: 0;
}
.banner > ul > li.active{
    opacity: 1;
}

.banner > ol {
    width: 160px;
    height: 15px;
    position: absolute;
    left: 45%;
    bottom: -20%;
    background-color: rgba(50, 50, 50, 0.15);

    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 15px;
}

.banner > ol > li {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
}

.banner > ol > li.active {
    background-color: #4349b6;
}

.banner > div {
    width: 40px;
    height: 65px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(50, 50, 50, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
}

.banner > div.left {
	top:68%;
    left: 0;
}
.banner > div.right {
	top:68%;
    right: 0;
}
ul{
	position:absolute;
	top:10%;
	left:3%;
	width:80%;
	height:50%;
	color:#000;
}
a{
	font-size:23px;
}
img{
	position:absolute;
	width:1000px;
	height:400px;
	top:9%;
	left:-6%;
	display: block;
}
</style>
<body background="/fonts/背景.png" alt="背景" style="background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;">
 <div class="banner">
        <!--图片区域-->
        <ul class="imgBox">
            <li class="active"><img src="/images/banner_lover.png" alt=""></li>
            <li><img src="/images/banner01.jpg" alt=""></li>
            <li><img src="/images/banner02.jpg" alt=""></li>
            <li><img src="/images/banner03.jpg" alt=""></li>
        </ul>
 
        <!--焦点区域-->
        <ol>
            <li data-i="0" data-name="point" class="active"></li>
            <li data-i="1" data-name="point"></li>
            <li data-i="2" data-name="point"></li>
            <li data-i="3" data-name="point"></li>
        </ol>
 
        <!--左右切换按钮-->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
<script>
 
        //获取到所有承载图片的 li 和所有承载焦点的 li
        var imgs = document.querySelectorAll('ul > li')
        var points = document.querySelectorAll('ol > li')
        var banner = document.querySelector('.banner')
 
        //准备一个变量，表示当前是第几张，默认是 0，因为默认显示的是索引第0张
        var index = 0
 
        //书写一个切换一张
        //约定：参数为 true，我们切换下一张; 参数为false， 切换上一张; 参数为数字，切换到指定索引的那一张
        function changeOne(type) {
            //1. 让当前这一张消失
            imgs[index].className = ''
            points[index].className = ''
 
            //2. 根据type 传递来的参数，来切换index 的值
            if(type === true) {
                index++
            } else if (type === false){
                index--
            } else {
                index = type
            }
 
            //判定一下 index 的边界值
            if (index >= imgs.length) {
                index =0
            }
            if(index < 0){
                index = imgs.length - 1
            }
 
            //3.让改变后的这一张显示出来
            imgs[index].className = 'active'
            points[index].className = 'active'
        }
 
        //给 轮播图区域盒子 绑定点击事件
        banner.onclick = function (e) {
            //判断点击的是焦点盒子
            if (e.target.dataset.name === 'point'){
                console.log("点击的是焦点按钮")
                //拿到自己身上记录的索引
                var i = e.target.dataset.i - 0
                //切换某一张，调用changeOne方法传递参数为要切换的索引
                changeOne(i)
            }
        }
 
        //自动切换功能，使用定时器，每5s切换至下一张
        setInterval(function () {
            //切换下一张
            changeOne(true)
        }, 5000)
    </script>
</body>
</html>